import {StyleSheet, TextInput, View} from 'react-native';
import {Button} from '@rneui/base';
import service from '../../api';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Home} from './home';
import {Navi} from './navi';
import {TabConfig} from '../../constants/TabConfig.ts';
import {Icon} from '@rneui/themed';

const Tab = createBottomTabNavigator();

export function Main() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => {
        const config = TabConfig.getConfig(route.name);
        return {
          tabBarIcon: ({color, size}) => {
            if (config) {
              return <Icon name={config.icon} size={size} color={color} />;
            }
            return null;
          },
          tabBarLabel: config ? config.name : route.name,
        };
      }}>
      {Object.keys(TabConfig.configs).map(key => {
        const config = TabConfig.getConfig(key);
        if (config) {
          return <Tab.Screen name={config.name} component={config.component} />;
        } else {
          return null;
        }
      })}
    </Tab.Navigator>
  );
}
